import React, {Component} from "react";
import PropTypes from "prop-types";
import {Image, ListView, Text, TouchableOpacity, View} from "react-native";
import {Button, Flex, InputItem, List, Modal, Popup} from "antd-mobile";
import color from "../../libs/color";
import {RefreshListView, RefreshState} from "../../widget";
import HTTP from "../../libs/HTTP";
import {formatDate, getOrganNo} from "../../libs/Libs";
import {storageRecordList} from "../../libs/api";

import {createForm} from "rc-form";

const Item = List.Item
const alert = Modal.alert
const addImg = require('../../img/Normal/add.png')
const searchImg = require('../../img/Normal/search.png')
const refreshImg = require('../../img/Normal/refresh.png')

export default class extends Component {
  static navigationOptions = ({ navigation }) => {
    const {state, setParams} = navigation;
    const params = state.params || {}
    return {
      title: '出货记录',
      headerStyle:{ backgroundColor: color.theme},
      headerTitleStyle:{ color: 'white', fontSize: 20 },
      headerRight: (
        <View style={{flexDirection: 'row'}}>
          <TouchableOpacity onPress={() => {
            navigation.navigate('OutBoundStack')
          }}>
            <Image source={addImg} style={{width: 28, height: 28}}/>
          </TouchableOpacity>
          <View style={{width: 5}}></View>
          <TouchableOpacity onPress={() => {
            navigation.navigate('MaterialsSearch', {
              recordType: 2
            })
          }}>
            <Image source={searchImg} style={{width: 28, height: 28}}/>
          </TouchableOpacity>
          <View><Text>{params.aa}</Text></View>
          <View style={{width: 5}}></View>
        </View>
      )
    }
  }

  constructor(props) {
    super(props)
    let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 })

    this.listView = undefined
    this.state = ({
      isAdd: false, //是否添加
      seaParams: {},
      isSearch: false, //是否搜索
      isLoading: false, //是否正在加载
      currentPage: 0, //当前页
      dataSource: ds.cloneWithRows([]),　//数据源
      innerData: [] //内部数据
    })
  }

  componentDidMount() {
    this.listView && this.listView.startHeaderRefreshing()
    let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 })
    this.props.navigation.setParams({
      reload: () => {
        this.setState({
          currentPage: 0,
          innerData: []
        }, () => {
          this.requestData()
        })
      }
    })
  }

  onSea = (vals) => {
    this.setState({
      currentPage: 0,
      innerData: [],
      seaParams: vals
    }, () => {
      this.requestData()
    })
  }

  requestData(vals = {}) {
    this.setState({isLoading: true})
    HTTP.post(storageRecordList(), Object.assign({}, this.state.seaParams, {
      dealerOrganNo: getOrganNo(),
      recordType: 2,
      page: this.state.currentPage
    }), () => {
      this.setState({isLoading: false})
    }, (resp) => {
      if(resp.data){
        this.setState(preState => {
          const newD = preState.innerData.concat(resp['data'])
          console.log('newD is {}', newD)
          return {
            innerData: newD,
            dataSource: preState.dataSource.cloneWithRows(newD),
            currentPage: preState.currentPage + 1
          }
        }, () => {
          if(resp.data.length == 0) {
            this.listView.endRefreshing(RefreshState.NoMoreData)
          } else {
            this.listView.endRefreshing(RefreshState.Idle)
          }
        })
      }
    })
  }

  renderCell(record) {
    const linkCustomer = record['linkCustomer']
    const storageName = record['storageName']
    const actionTime = formatDate(record['actionTime'])
    const producerName = record['producerName']
    return (
      <Item>
        <TouchableOpacity onPress={() => {
          this.props.navigation.navigate('OutBoundDetail', {
            batchNo: record['batchNo'],
            operatorId: record['operatorId']
          })
        }}>
          <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
            <Text style={{fontWeight: 'bold', color: '#333333'}}>厂方: {producerName}</Text>
            <Text>{actionTime}</Text>
          </View>
          <View style={{height: 5}}></View>
          <View><Text>客户: {linkCustomer}  仓库: {storageName}</Text></View>
        </TouchableOpacity>
      </Item>
    )
  }


  render() {
    return (
      <View>
        <RefreshListView
          ref={(e) => this.listView = e}
          dataSource={this.state.dataSource}
          renderHeader={() =>
            <View></View>
          }
          renderRow={(rowData) => {
            return (
              this.renderCell(rowData)
            )
          }}
          onHeaderRefresh={() => this.requestData()}
          onFooterRefresh={() => this.requestData()}
        />
      </View>
    )
  }
}
